<template>
  <div class="container">
    <div class="left">
      <div class="top">
        <div class="icon">
          <div class="text">
            <h2>在线审核</h2>
          </div>
        </div>
      </div>
      <div class="box">
        <img src="https://img2.baidu.com/it/u=2258507004,2911211796&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=400" alt="">
        <div class="avator">
          <img src="http://39.104.22.73:67/readme_img/favicon.ico" alt="">
        </div>
        <div class="desc">
          <span style=" color: #606266;font-size: 16px;line-height: 25px;">{{name}}</span>
          <span>{{college}}</span>
        </div>
        <div class="btm">
          <div>
            <span>{{total}}</span>
            <span>
              <span>总数</span>
            </span>
          </div>
          <div>
            <span>{{total - todo}}</span>
            <span>
              <span>未审核</span>
            </span>
          </div>
        </div>

      </div>
    </div>

    <div class="right">
      <div class="table">
        <el-table ref="tableRef" row-key="date" :data="list[0]" style="width: 100%">
          <el-table-column
              prop="name"
              label="作品名称"
              fixed
              width="180"
          />
          <el-table-column prop="field" label="所属领域" width="180"/>
          <el-table-column prop="kind" label="申报种类"/>
          <el-table-column prop="type1" label="申报类别" width="180"/>
          <el-table-column prop="teacher1" label="第一指导教师" width="180"/>
          <el-table-column prop="name1" label="第一作者" width="180"/>
          <el-table-column fixed="right" label="Operations" width="120">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="edit(scope.$index)">Edit</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, reactive, inject} from 'vue'
import {useRouter} from "vue-router";
const router = useRouter()
const axios = inject("$axios")
const tableRef = ref()
const list = reactive([[]])
const name = window.localStorage.getItem("name")
const college = window.localStorage.getItem("college")
const tel = window.localStorage.getItem("telephone")

const total = ref(0)
const todo = ref(0)
const resetDateFilter = () => {
  tableRef.value?.clearFilter(['date'])
}
onMounted(() => {
  axios.get('judge/work?name='+name+'&field='+college+'&telephone='+tel).then(res => {
    list[0] = res.data
    total.value = list[0].length
    list[0].forEach(i=>{
      if(i.score>0)total.value = total.value+1
    })
  })
})
// TODO: improvement typing when refactor table
const clearFilter = () => {
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-expect-error
  tableRef.value?.clearFilter()
}
const formatter = (row, column) => {
  return row.address
}
const filterTag = (value, row) => {
  return row.tag === value
}
const filterHandler = (
    value,
    row,
    column
) => {
  const property = column['property']
  return row[property] === value
}
const edit = (i)=>{
  router.push({
    name:"work",
    params:list[0][i]
  })
}

</script>

<style scoped lang="less">
.container {

  min-height: 100vh;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: nowrap;
  width: 90%;

  .left {
    width: 200px;
    transform: translateX(-30px);

    .top {
      width: 130px;
      height: 40px;
      line-height: 40px;
      background-color: #ffffff;
      border-radius: 40px;
      margin: 10px auto;
      margin-top: 30px;

    }
  }

  .box {
    width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
    margin-bottom: 100px;
    height: 300px;
    margin: 10px 0;

    img {
      width: 200px;
      height: 100px;
    }

    .avator {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      overflow: hidden;
      margin: 0 auto;
      transform: translateY(-50%);

      img {
        width: 100%;
        height: 100%;
      }

    }

    .desc {
      color: #909399;
      font-size: 14px;
      display: flex;
      flex-direction: column;
      text-align: center;
      transform: translateY(-40px);
    }

    .btm {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      transform: translateY(-20px);

      width: 150px;

      div {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #909399;
        font-size: 14px;
      }
    }
  }

  .right {
    width: 97%;
    margin: 30px 0;

    .table {
      padding: 10px;
      border-radius: 10px;
      min-height: 330px;
      background-color: #ffffff;
      width: 90%;
      max-width: 1000px;
    }
  }

}
</style>